import React, { useState } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Input, Descriptions, Button } from "antd";
import { selectByMobile } from "../services";



const ClueReceive = ({visible, onCancel, onSubmit, title}: modalPropsType) => {
  const [detail, setDetail] = useState<any>({});

  const nextStep = () => {
    onSubmit(detail);
  }
  
  const onSearch = async (value: string) => {
    if (!value.trim()) {
      setDetail({});
      return ;
    }
    const res = await selectByMobile({mobile: value});
    if (res?.code === '0') {
      setDetail(res?.data);
    }
  }

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      footer={false}
      maskClosable={false}
      width='550px'
    >
       <div className="modal-form-padding">
        <Input.Search
          placeholder="请输入手机号"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
        />
        <Descriptions bordered title="客户信息" style={{marginTop: '50px'}} column={1}>
          <Descriptions.Item label="手机号">{detail?.mobile}</Descriptions.Item>
          <Descriptions.Item label="呢称/姓名">{detail?.nickName}</Descriptions.Item>
          <Descriptions.Item label="公司名称">{detail?.fullName}</Descriptions.Item>
        </Descriptions>
       </div>
       <div style={{display: 'flex', justifyContent: 'center', marginTop: '30px'}}>
        <Button type="primary" size="large" style={{width: '300px'}} onClick={nextStep}>认领客户</Button>
       </div>
    </Modal>
  );
}
export default ClueReceive;